<div ng-controller="registerAppCtl">
    <div ng-if="!isLoading" class="row">
        <div class="card-panel grey lighten-5 z-depth-1 hoverable">
            <h5 class="center-align black-text"> User register </h5>
            <div class="row">
                <div class="col s12 m8 offset-m2 l8 offset-l2">
                    <div class="input-field row">
                        <i class="material-icons prefix">email</i>
                        <input ng-model="registerData.login" id="loginname" type="email" class="validate" minlength="8" maxlength="32">
                        <label for="loginname" data-error="login account is email address">login email</label>
                    </div>
                    <div class="input-field row">
                        <i class="material-icons prefix">face</i>
                        <input ng-model="registerData.nickname" id="nickname" type="text" class="validate" minlength="4" maxlength="20">
                        <label for="nickname" data-error="nickname 4-20 characters">nickname show in chat list</label>
                    </div>
                    <div class="input-field row">
                        <i class="material-icons prefix">vpn_key</i>
                        <input ng-model="registerData.password" id="password" type="password" class="validate" minlength="6" maxlength="18">
                        <label for="password" data-error="login password 6-18 characters">login password</label>
                    </div>
                    <div class="input-field row">
                        <i class="material-icons prefix">vpn_key</i>
                        <input ng-model="registerData.repassword" id="repassword" type="password" class="validate" minlength="6" maxlength="18">
                        <label for="repassword" data-error="6-18 characters and the same with password">repeat login password</label>
                    </div>
                    <div class="container">
                        <div class="row center-align">
                            <div class="col s6">
                                <input ng-model="registerData.gender" name="sex" type="radio" id="sex1" value="1"/>
                                <label for="sex1">
                                    <div class="chip">
                                        <img src="images/avatar/boy.jpg" alt="Contact Person">
                                        Boy
                                    </div>
                                </label>
                            </div>
                            <div class="col s6">
                                <input ng-model="registerData.gender" name="sex" type="radio" id="sex2" value="2"/>
                                <label for="sex2">
                                    <div class="chip">
                                        <img src="images/avatar/girl.jpg" alt="Contact Person">
                                        Girl
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row"></div>
                    <div class="row center-align">
                        <a ng-click="registerSubmit()" class="green waves-effect waves-light btn"><i class="material-icons left">person_add</i> register </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>